<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>库房</BreadcrumbItem>
      <BreadcrumbItem>盘点</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>

    <h2 class="primary">盘点</h2>
  </div>

  <div class="info">
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons>
        <div class="info1">
          <vxe-input
            v-model="searchName"
            placeholder="请输入盘点名称"
            style="width: 280px"
          ></vxe-input>
          <vxe-button status="primary">搜索</vxe-button>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const xGrid = ref();
const findList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const list = [
        {
          id: 1,
          name: "中药库房",
          dizhi: "T1",
          mianji: "Develop",
          fuzeren: "Man",
          guanliren: 28,
          beizhu: "Shenzhen",
          caozuo: "1",
        },
      ];
      const rest = {
        page: {
          total: 200,
        },
        result: list,
      };
      resolve(rest);
    }, 500);
  });
};
const meanNum = (list, field) => {
  let count = 0;
  list.forEach((item) => {
    count += Number(item[field]);
  });
  return count / list.length;
};
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  showFooter: true,

  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    perfect: true,
  },
  toolbarConfig: {
    zoom: true,
    custom: true,
    slots: {
      // 自定义插槽模板
      buttons: "toolbar_buttons",
    },
  },
  proxyConfig: {
    props: {
      result: "result",
      total: "page.total", // 配置响应结果总页数字段
    },
    ajax: {
      query: () => findList(),
    },
  },
  columns: [
    { field: "id", title: "序号" },
    { field: "name", title: "名称" },
    { field: "dizhi", title: "地址" },
    { field: "mianji", title: "面积" },
    { field: "fuzeren", title: "负责人" },
    { field: "guanliren", title: "管理人" },
    { field: "beizhu", title: "备注" },
    { field: "caozuo", title: "操作" },
  ],
});
</script>

<style scoped>
.nav {
  height: 80px;
  border-bottom: 1px solid #c4c2c2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  background-color: #ffffff;
}
.info {
  border: 15px solid#f5f7f9;
  padding: 15px;
  background-color: #fff;
  height: 100vh;
  border-radius: 20px;
}

.primary {
  color: #945635;
}

h2 {
  font-weight: normal;
  font-size: 20px;
}

</style>